<template>
  <div>
    <h1>房型列表</h1>
    <div>
      房型名称:<input type="text" v-model="queryInfo.typeName"/>
    <input type="button" value="查询" class="btn btn-success" @click="showw"/>
    </div>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td>
            <input type="checkbox" v-model="checkAll" @click="CheckAll"/>
          </td>
          <td>房型id</td>
          <td>房型名称</td>
          <td>房型价格</td>
          <td>面积</td>
          <td>最多入住人数</td>
          <td>房型图片</td>
          <td>房型描述</td>
          <td>是否有窗</td>
          <td>操作</td>
        </tr>
        <tr v-for="item in data.list">
          <td>
            <input type="checkbox" :value="item.houseId" v-model="checkone" @change="Checkone"/>
          </td>
          <td>{{ item.houseId }}</td>
          <td>{{ item.typeName }}</td>
          <td>{{ item.price }}</td>
          <td>{{ item.area }}</td>
          <td>{{ item.peoples }}</td>
          <td>
            <img :src="item.houseImg" alt="" width="100px" height="70px"/>
          </td>
          <td>{{ item.desc }}</td>
          <td>{{ item.isWin == 0 ? "是" : "否" }}</td>
          <td>
                  <input type="button" value="删除" class="btn btn-danger" @click="del(item.houseId)"/>
                  <input type="button" value="修改" class="btn btn-primary" @click="update(item.houseId)"/>
                  <input type="button" value="有窗" class="btn btn-info" v-if="item.isWin==1" @click="updatestate(item.houseId,0)"/>
                  <input type="button" value="无窗" class="btn btn-success" v-else @click="updatestate(item.houseId,1)"/>
                  <input type="button" value="详情" class="btn btn-primary" @click="detail(item.houseId)"/>
          </td>
        </tr>
      </tbody>
    </table>
      <div>
            <span>共<b style="color: brown;">{{ data.totalCount }}</b>条</span>

            <span>共<b style="color: brown;">{{ data.totalPage }}</b>页 </span>

            <span>当前在第<b style="color: brown;">{{ queryInfo.pageIndex }}</b>页/共<b style="color: brown;">{{ data.totalPage }}</b>页</span>

            <select v-model="queryInfo.pageSize" @change="getList">
                <option :value="item" v-for="item in arr">每页显示{{ item }}条</option>
            </select>

            <input type="button" value="首页" @click="goPage(1)"/>
            <input type="button" value="上一页" @click="goPage(queryInfo.pageIndex-1)"/>
            <span v-for="item in data.totalPage" @click="goPage(item)">{{ item }}</span>
            <input type="button" value="下一页" @click="goPage(queryInfo.pageIndex+1)"/>
            <input type="button" value="尾页" @click="goPage(data.totalPage)"/>
            <input type="number" v-model="queryInfo.pageIndex"/>
            <input type="button" value="跳转" class="btn btn-warning" @click="goPage(queryInfo.pageIndex)"/>
      </div>
            <input type="button" value="批量删除" class="btn btn-danger" @click="delAll"/>
            <input type="button" value="批量有窗" class="btn btn-info" @click="AllUpdateState(0)"/>
            <input type="button" value="批量无窗" class="btn btn-primary" @click="AllUpdateState(1)"/>
  </div>
</template>

<script setup lang="ts">
import axios from "axios";
import moment from "moment";
import { ref, reactive, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();

import { useUserStore } from "@/stores/user";
const abc = useUserStore();
//声明一个数据表示每页显示多少条
let arr=ref([3,5,10,20])
onMounted(() => {
  getList(); //获取房型列表
});

let data: any = reactive({
  list: [],
  totalCount: 0,
  totalPage: 0,
});

let queryInfo: any = reactive({
  pageIndex: 1,
  pageSize: 3,
  typeName: "",
});

const showw=()=>
{
  queryInfo.pageIndex=1;
  getList();
}

const getList = () => {
  axios({
    url: "/api/House/ShowHouse",
    method: "get",
    params: queryInfo,
  })
    .then((res) => {
      console.log(res);
      Object.assign(data, res.data);
    })
    .catch((err) => {
      console.log(err);
    });
};

//分页
const goPage=(num:any)=>
{
  if(num<1)
  {
    queryInfo.pageIndex=1;
    return;
  }
  if(num>data.totalPage)
  {
    queryInfo.pageIndex=data.totalPage;
      return;
  }
  queryInfo.pageIndex=num;
  getList();
}
//删除
const del=(id:any)=>
{
  let f=confirm("确认删除吗?")
  {
    if(f)
    {
      axios
      ({
        url:'/api/House/DelHouseTypeAll',
        method:'delete',
        params:
        {
          ids:id
        }
      })
      .then(res=>{
        if(res.data>0)
        {
          alert("删除成功");
          getList();
          return;
        }
        else
        {
          alert("删除失败");
          return;
        }
      })
      .catch(err=>{

      })
    }
  }
}
//修改
const update=(id:any)=>
{
  router.push
  ({
    path:'/houseUpdate',
    query:
    {
      id:id
    }
  })
}

//修改是否有窗
const updatestate=(id:any,isWin:any)=>
{
  let f=confirm("确认修改吗?")
  {
    if(f)
    {
      axios
      ({
        url:'/api/House/AllUpdateHouseTypeState',
        method:'put',
        params:
        {
          ids:id,
          state:isWin
        }
      })
      .then(res=>{
        if(res.data>0)
        {
          alert("修改成功");
          getList();
          return;
        }
        else
        {
          alert("修改失败");
          return;
        }
      })
      .catch(err=>{

      })
    }
  }
}



let checkAll=ref(false);
let checkone=ref([])
//全选
const CheckAll=()=>
{
  checkAll.value=!checkAll.value;
  if(checkAll.value==true)
  {
    checkone.value=data.list.map((item:any)=>{
      return item.houseId;
    })
  }
  else
  {
    checkone.value=[];
  }
}

const Checkone=()=>
{
  if(checkone.value.length==data.list.length)
  {
    checkAll.value=true;
  }
  else
  {
    checkAll.value=false;
  }
}

//批量删除  需要id数组  =>转成字符串
const delAll=()=>
{
    //必选一项
    if(checkone.value.length==0)
    {
      alert("必选一项");
      return;
    }
    let f=confirm("确认删除吗?")
    {
        if(f)
        {
            axios
            ({
                url:'/api/House/DelHouseTypeAll',
                method:'delete',
                params:
                {
                  ids:checkone.value.toString()
                }
            })
            .then(res=>{
                if(res.data>0)
                {
                    alert("删除成功");
                    checkAll.value=false;
                    getList();
                }
                else
                {
                    alert("删除失败");
                    checkAll.value=false;
                    return;
                }
            })
            .catch(err=>{
                console.log(err);
            })
        }
    }
}
//批量修改
const AllUpdateState=(state:any)=>
{
  //必选一项
  if(checkone.value.length==0)
  {
    alert("必选一项");
    return;
  }
  let f=confirm("确认修改吗?")
  {
    if(f)
    {
      axios
      ({
        url:'/api/House/AllUpdateHouseTypeState',
        method:'put',
        params:
        {
           ids:checkone.value.toString(),
           state:state
        }
      })
      .then(res=>{
        if(res.data>0)
        {
          alert("修改成功");
          checkAll.value=false;
          checkone.value=[];
          getList();
          return;
        }
        else
        {
          alert("修改失败");
          checkAll.value=false;
          checkone.value=[];
          return;
        }
      })
      .catch(err=>{

      })
    }
  }
}

const detail=(id:any)=>
{
    router.push
    ({
        path:'/housedetailist',
        query:
        {
            id:id
        }
    })
}

</script>

<style scoped>
span{
    margin: 0 10px;
}
input[type='button'] {
    margin: 0 5px;
}</style>
